{\rtf1\ansi\ansicpg936\cocoartf1265\cocoasubrtf210
{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\fnil\fcharset134 STHeitiSC-Light;}
{\colortbl;\red255\green255\blue255;}
{\info
{\author \'d7\'a3\'ce\'c4\'c1\'fa}}\paperw11900\paperh16840\margl1440\margr1440\vieww10800\viewh8400\viewkind0
\deftab720
\pard\pardeftab720

\f0\fs26 \cf0 CSS media queries\

\f1 \'d2\'bb\'a1\'a2\'d2\'fd\'d3\'c3
\f0 \
1)HTML\

\f1 \'b3\'a3\'d3\'c3\'a3\'ba
\f0 \
<link rel="stylesheet" type="text/css" href="../css/style.css">\
\

\f1 \'cc\'d8\'b6\'a8\'d1\'f9\'ca\'bd\'d2\'fd\'d3\'c3\'a3\'ba
\f0 \
<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />\
\
<link rel="stylesheet" media="max-width:800px" href="style.css" />\
\
\
2)Css\
@media (max-width: 800px) \{\
	body \{\
		background: #f90;\
	\}\
\}\
\
@import url("style.css") screen;\
@import url("style.css") print;\
\
3)XML\
<?xml-stylesheet rel="stylesheet" href="style.css" ?>\
\
\

\f1 \'b6\'fe\'a1\'a2\'ca\'b9\'d3\'c3
\f0 \
1
\f1 \'a3\'a9\'d7\'ee\'b4\'f3\'bf\'ed\'b6\'c8
\f0  Max-width\
@media (max-width: 800px) \{\
	body \{\
		background: #f90;\
	\}\
\}\
\
2)
\f1 \'d7\'ee\'d0\'a1\'bf\'ed\'b6\'c8
\f0  min-width\
@media (min-width: 800px) \{\
	body \{\
		background: #f90;\
	\}\
\}\
\
3)
\f1 \'c9\'e8\'b1\'b8\'b3\'a4\'bf\'ed
\f0  device-width\

\f1 \'bf\'c9\'d3\'c3\'ca\'f4\'d0\'d4\'d3\'d0\'a3\'ba
\f0 \
device-width max-device-width min-device-width\
device-height max-device-height min-device-height\
<link rel="stylesheet" type="text/css" media="max-device-width:480px)" href="ios.css" />\
\
4)
\f1 \'ca\'d3\'cd\'f8\'c4\'a4\'b2\'e9\'d1\'af
\f0  device-pixel-ratio:2\
<link rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio:2) href="retina.css" />\
\
5)
\f1 \'ba\'e1\'c6\'c1
\f0 [landscape] 
\f1 \'d3\'eb
\f0  
\f1 \'ca\'fa\'c6\'c1
\f0 [portrait]\
@media (min-width:700px) and (orientation:landscape) \{ ... \}\
@media tv and (min-width:700px) and (orientation:landscape) \{ ... \}\
\
\

\f1 \'c8\'fd\'a1\'a2\'b9\'d8\'bc\'fc\'d7\'d6
\f0 \
1.not\
not
\f1 \'b9\'d8\'bc\'fc\'d7\'d6\'ca\'c7\'d3\'c3\'c0\'b4\'c5\'c5\'b3\'fd\'c4\'b3\'d6\'d6\'d6\'c6\'b6\'a8\'b5\'c4\'c3\'bd\'cc\'e5\'c0\'e0\'d0\'cd\'a3\'ac\'bb\'bb\'be\'e4\'bb\'b0\'c0\'b4\'cb\'b5\'be\'cd\'ca\'c7\'d3\'c3\'d3\'da\'c5\'c5\'b3\'fd\'b7\'fb\'ba\'cf\'b1\'ed\'b4\'ef\'ca\'bd\'b5\'c4\'c9\'e8\'b1\'b8\'a1\'a3
\f0 \
<link rel="stylesheet" type="text/css" media="not print and (max-width:1200px)" href="print.css" />\
@media not all and (monochrome) \{ ... \}\
\
2.and\

\f1 \'d3\'c3\'d3\'da\'ba\'cf\'b2\'a2\'b6\'e0\'b8\'f6\'c3\'bd\'cc\'e5\'c0\'e0\'d0\'cd
\f0 \
<link rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio:2) href="retina.css" />\
\
3.only\
only
\f1 \'d3\'c3\'c0\'b4\'b6\'a8\'c4\'b3\'d6\'d6\'cc\'d8\'b6\'a8\'b5\'c4\'c3\'bd\'cc\'e5\'c0\'e0\'d0\'cd\'a3\'ac\'bf\'c9\'d2\'d4\'d3\'c3\'c0\'b4\'c5\'c5\'b3\'fd\'b2\'bb\'d6\'a7\'b3\'d6\'c3\'bd\'cc\'e5\'b2\'e9\'d1\'af\'b5\'c4\'e4\'af\'c0\'c0\'c6\'f7\'a1\'a3\'c6\'e4\'ca\'b5
\f0 only
\f1 \'ba\'dc\'b6\'e0\'ca\'b1\'ba\'f2\'ca\'c7\'d3\'c3\'c0\'b4\'b6\'d4\'c4\'c7\'d0\'a9\'b2\'bb\'d6\'a7\'b3\'d6
\f0 Media Query
\f1 \'b5\'ab\'c8\'b4\'d6\'a7\'b3\'d6
\f0 Media Type
\f1 \'b5\'c4\'c9\'e8\'b1\'b8\'d2\'fe\'b2\'d8\'d1\'f9\'ca\'bd\'b1\'ed\'b5\'c4\'a1\'a3\'c6\'e4\'d6\'f7\'d2\'aa\'d3\'d0\'a3\'ba\'d6\'a7\'b3\'d6\'c3\'bd\'cc\'e5\'cc\'d8\'d0\'d4\'a3\'a8
\f0 Media Queries
\f1 \'a3\'a9\'b5\'c4\'c9\'e8\'b1\'b8\'a3\'ac\'d5\'fd\'b3\'a3\'b5\'f7\'d3\'c3\'d1\'f9\'ca\'bd\'a3\'ac\'b4\'cb\'ca\'b1\'be\'cd\'b5\'b1
\f0 only
\f1 \'b2\'bb\'b4\'e6\'d4\'da\'a3\'bb\'b6\'d4\'d3\'da\'b2\'bb\'d6\'a7\'b3\'d6\'c3\'bd\'cc\'e5\'cc\'d8\'d0\'d4
\f0 (Media Queries)
\f1 \'b5\'ab\'d3\'d6\'d6\'a7\'b3\'d6\'c3\'bd\'cc\'e5\'c0\'e0\'d0\'cd
\f0 (Media Type)
\f1 \'b5\'c4\'c9\'e8\'b1\'b8\'a3\'ac\'d5\'e2\'d1\'f9\'be\'cd\'bb\'e1\'b2\'bb\'b6\'c1\'c1\'cb\'d1\'f9\'ca\'bd\'a3\'ac\'d2\'f2\'ce\'aa\'c6\'e4\'cf\'c8\'b6\'c1
\f0 only
\f1 \'b6\'f8\'b2\'bb\'ca\'c7
\f0 screen
\f1 \'a3\'bb\'c1\'ed\'cd\'e2\'b2\'bb\'d6\'a7\'b3\'d6
\f0 Media Qqueries
\f1 \'b5\'c4\'e4\'af\'c0\'c0\'c6\'f7\'a3\'ac\'b2\'bb\'c2\'db\'ca\'c7\'b7\'f1\'d6\'a7\'b3\'d6
\f0 only
\f1 \'a3\'ac\'d1\'f9\'ca\'bd\'b6\'bc\'b2\'bb\'bb\'e1\'b1\'bb\'b2\'c9\'d3\'c3\'a1\'a3
\f0 \
<link rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio:2) href="retina.css" />\
\

\f1 \'b2\'ce\'bf\'bc\'a3\'ba
\f0 \
w3c\
http://www.w3.org/TR/css3-mediaqueries/\
\
MOZ\
https://developer.mozilla.org/en-US/docs/Web/CSS/@media\
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries\

\f1 \'d2\'d4\'c9\'cf\'b5\'c4\'d6\'d0\'ce\'c4\'b0\'e6
\f0 \
http://www.w3cplus.com/content/css3-media-queries\
\
w3schools\
http://www.w3schools.com/css/css_mediatypes.asp\
}